<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { fetchCategoryList } from '@/api/student'

interface Props {
  value: string | number | string[] | number[] | undefined
}
const props = defineProps<Props>()
const emit = defineEmits(['update:value'])
const selectValue = computed({
  get() {
    return props.value
  },
  set(value) {
    emit('update:value', value)
  }
})

const categoryList = ref<any[]>([])

const getCategoryList = () => {
  fetchCategoryList({}).then((res) => {
    categoryList.value = res.data.data.data
  })
}

onMounted(() => {
  getCategoryList()
})
</script>

<template>
  <a-select style="width: 240px" placeholder="请选择班级" mode="multiple" v-model:value="selectValue">
    <a-select-option v-for="category in categoryList" :key="category.id" :value="category.id">{{
      category.category_name
    }}</a-select-option>
  </a-select>
</template>

<style lang="scss" scoped></style>
